<template>
    <div class="starData-mes">
        <van-nav-bar
                title="卫星信号"
                class="header"
                left-text=""
                left-arrow
                @click-left="jumpPage('/')"
                style="position: sticky;top:0px"
        />
        <div class="vant-table">
            <!-- {{satelliteData}} -->
            <table cellspacing="0" style="width:100%" class="table">
                <tr>
                    <th class="th" v-for="(item, index) in option.column" :key="index" style="position: sticky;top:20px">{{ item.label }}</th>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
                    <td v-for="(context, i) in option.column" :key="i">{{ item[context.prop] }}</td>
                </tr>
            </table>
        </div>
        <!-- 下部选项条 -->
        <div class="underbox">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="star-o" @click="jumpPage('/star')">星空图</van-tabbar-item>
                <van-tabbar-item icon="bar-chart-o" @click="jumpPage('/linemap')">信号图</van-tabbar-item>
                <van-tabbar-item icon="shrink" @click="jumpPage('/stardata')">俯仰角</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active:2,
                tableData: [],
                satelliteData:"",
                //th
                option: {
                    column: [
                        {
                            label: '卫星数',
                            prop: 'starNum'
                        },
                        {
                            label: '卫星俯仰角',
                            prop: 'starAngle'
                        },
                    ]
                }
            }
        },
        methods: {
            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            putDataToTable(){
                var data = this.satelliteData;
                // var data = [
                //     //type1是区域，2是全球,
                //     //mark1是北斗2,2是北斗3
                //     {sv: 'G3', azi: 294, ele: 23, sn1: 45, sn2: 41, sn3: 0,type:1,mark:1},
                //     {sv: 'G14', azi: 130, ele: 68, sn1: 47, sn2: 41, sn3: 0,type:2,mark:1},
                //     {sv: 'G16', azi: 231, ele: 43, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                //     {sv: 'G22', azi: 268, ele: 28, sn1: 45, sn2: 35, sn3: 0,type:2,mark:1},
                //     {sv: 'G25', azi: 44, ele: 12, sn1: 31, sn2: 0, sn3: 27,type:1,mark:1},
                //     {sv: 'G26', azi: 257, ele: 73, sn1: 52, sn2: 47, sn3: 43,type:2,mark:1},
                //     {sv: 'G29', azi: 66, ele: 30, sn1: 47, sn2: 37, sn3: 0,type:1,mark:1},
                //     {sv: 'G31', azi: 26, ele: 57, sn1: 50, sn2: 42, sn3: 0,type:2,mark:1},
                //     {sv: 'G32', azi: 140, ele: 42, sn1: 48, sn2: 40, sn3: 41,type:1,mark:2},
                //     {sv: 'C1', azi: 143, ele: 47, sn1: 46, sn2: 45, sn3: 46,type:2,mark:2},
                //     {sv: 'C2', azi: 231, ele: 36, sn1: 43, sn2: 45, sn3: 45,type:1,mark:2},
                //     {sv: 'C4', azi: 121, ele: 33, sn1: 42, sn2: 45, sn3: 45,type:2,mark:2},
                //     {sv: 'C5', azi: 251, ele: 15, sn1: 39, sn2: 43, sn3: 43,type:2,mark:2},
                //     {sv: 'C6', azi: 186, ele: 50, sn1: 46, sn2: 45, sn3: 47,type:2,mark:2},
                //     {sv: 'C7', azi: 330, ele: 68, sn1: 49, sn2: 49, sn3: 49,type:2,mark:2},
                //     {sv: 'C9', azi: 233, ele: 67, sn1: 47, sn2: 47, sn3: 48,type:1,mark:2},
                //     {sv: 'C10', azi: 284, ele: 54, sn1: 47, sn2: 45, sn3: 47,type:2,mark:2},
                //     {sv: 'C14', azi: 313, ele: 17, sn1: 43, sn2: 47, sn3: 47,type:1,mark:2},
                //     {sv: 'R1', azi: 202, ele: 44, sn1: 50, sn2: 43, sn3: 0,type:2,mark:2},
                //     {sv: 'R2', azi: 299, ele: 49, sn1: 53, sn2: 49, sn3: 0,type:1,mark:1},
                //     {sv: 'R11', azi: 30, ele: 36, sn1: 51, sn2: 49, sn3: 0,type:2,mark:1},
                //     {sv: 'R12', azi: 316, ele: 47, sn1: 51, sn2: 0, sn3: 0,type:1,mark:1},
                //     {sv: 'R21', azi: 78, ele: 24, sn1: 48, sn2: 48, sn3: 0,type:2,mark:1},
                //     {sv: 'R22', azi: 134, ele: 15, sn1: 48, sn2: 46, sn3: 0,type:1,mark:1}];
                this.tableData=[];
                for (var i=0;i<data.length;i++){
                    // var geometry_x = (90 - data.satellite_state[i].elevation) * Math.sin(Math.PI * data.satellite_state[i].azimuth / 180);
                    // var geometry_y = (90 - data.satellite_state[i].elevation) * Math.cos(Math.PI * data.satellite_state[i].azimuth / 180);
                    this.tableData.push({
                        starNum: data[i].sv,
                        starAngle: data[i].ele+'°'
                    });

                }
            },
            getAllStarInfo(){
                let res = $App.getGpsSatelliteList();
                this.satelliteData = JSON.parse(res);
            },
            // show(){
            //     var that = this;
            //     setTimeout(() => {
            //          that.getAllStarInfo();
            //     },5000);
            // },
        },
        mounted() {
            // this.getAllStarInfo();
            // this.putDataToTable();
            var that = this;
                setTimeout(() => {
                     that.getAllStarInfo();
                     this.putDataToTable();
            },1000);
        }
    };

</script>

<style scoped>
    .starData-mes{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .starData-mes .header{
        color: #ffffff;
        margin-bottom: 1rem;
        background-color: #153744;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }

    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }

    .vant-table .table{
        text-align: center;
        height: calc(100% - 100px);
        padding: 0.5rem;
    }
    .vant-table .table .th {
        font-size: 0.8rem;
        line-height: 1.5rem;
        background-color: #173744;
        border-bottom: #ffffff 2px solid;
        color:  #ffffff;
        text-align: center;
    }
    .vant-table .table .list-tr {
        font-size: 0.8rem;
        line-height: 1.6rem;
    }
    .vant-table .table .list-tr:nth-child(2n) {
        background-color: rgba(21, 55, 68, 0.5);
        color:  #ffffff;
    }

</style>
